<%@ page import="cn.gpnu.domain.User" %>
<%@ page import="cn.gpnu.dao.Userdao" %>
<%@ page import="cn.gpnu.domain.Tree" %>
<%@ page import="java.util.List" %>
<%@ page import="cn.gpnu.domain.TreePrice" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树种更换</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<style>
    body{

    }
    table{
        width: 600px;
        height: 600px;
        margin: auto;
    }
    td{
        width: 180px;
        text-align: center;
    }
    tr{
        width: 600px;
    }
    .rg_center{
        border: 4px solid skyblue;
        margin: auto;
        width: 600px;
        margin-top: 20px;
    }
    .text{
        margin: auto;
    }
    .sp_1{
        color: #5cb85c;
        font-size: 200%;
    }
    .btn{
        margin-left: 30px;
        margin-bottom: 10px;
    }
    .change{
        width: 150px;
        height: 150px;
    }
    .gold{
        margin-left: 20px;
        margin-top: 10px;
        color: gold;
        text-align: left;
        font-size: 150%;
    }
    .gold_price{
        margin-left: 20px;
        color: black;
        font-size: 120%;
    }
    .gold_pic{
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }
    .gold_pic_price{
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
    }
    .name{
        margin-left: 20px;
        margin-top: 10px;
        color: cornflowerblue;
        text-align: left;
        font-size: 150%;
    }
    .input_01{
        width: 180px;
        height: 40px;
        margin-left: 50px;
        border-radius: 5px;
        padding-left: 10px;
    }
    .btn{
        width: 100px;
        margin-top: 8px;
    }
</style>
<body onload="select_data()">
<%--<body onload="doit()">--%>
<%
    List<Tree> query = (List<Tree>) request.getAttribute("query");
//    for (Tree tree : query) {
//        System.out.println(tree.getTree_state());
//    }
%>

<%
    List<TreePrice> treePrices = (List<TreePrice>) request.getAttribute("treePrices");
//    for (TreePrice treePrice : treePrices) {
//        System.out.println(treePrice.getTree_price());
//    }
%>
<%
    User user = (User) request.getAttribute("user");
    System.out.println(user.getUsername());
%>


<input type="hidden" id="id" value="<%=request.getParameter("id")%>"/>

<form style="float: left">
    <tr>
        <td>
            <span class="name">
                用户昵称:<%=user.getName()%>
            </span>
        </td>
        </br>
        <td>
            <span class="gold">
                    您的金币:<%=user.getGold()%>
                </span>
            <img src="../img/gold.png" class="gold_pic" >
        </td>
    </tr>
</form>

<div class="rg_center">
    <table class="table table-striped table table-bordered  table-hover">


        <% for(Tree tree : query){%>
        <tr>
            <td>
                <img src="树<%=tree.getTree_id()%><%=tree.getTree_state()%>.png" class="change" >
                <span class="gold_price">
                   (<%=tree.getTree_id()%>)&nbsp;&nbsp;500
                </span>
                <img src="../img/gold.png" class="gold_pic_price" >
            </td>
        </tr>
        <%;}%>
    </table>
    <input type="number"  class="input_01" id = "tree_id" placeholder="请输入你想要的树种">
    <button id = "btn_01" type="submit" class="btn btn-success">Buy</button>
    <button id = "btn_02" type="submit" class="btn btn-success">Sell</button>
</div>
<!--    <div class="progress progress-striped active">-->
<!--        <div id = "progress_bar"class="progress-bar progress-bar-success div_2" role="progressbar"-->
<!--             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"-->
<!--             style="width: 20%;">-->
<!--            &lt;!&ndash;        <span class="sr-only">40% 完成</span>&ndash;&gt;-->
<!--        </div>-->
<!--        <br>-->
<!--    </div>-->
<!--    <button id = "btn_01" type="submit" class="btn btn-success">Sign in</button>-->

<script>
    var user_id  = document.getElementById("id").value;
    var tree_id;
    var buy = document.getElementById("buy");
    var btn_01 = document.getElementById("btn_01");
    var btn_02 = document.getElementById("btn_02");
    var flag = 2;
    //
    //
    // buy.onclick = function () {
    //     swal({
    //         title: "您确定购买这颗树吗",
    //         text: "一经购买，将无法退换",
    //         icon: "问号.png",
    //         buttons: true,
    //         dangerMode: "假的",
    //     })
    //         .then((willDelete) => {
    //             if (willDelete) {
    //                 swal("购买成功", {
    //                     icon: "success",
    //
    //                 });
    //             } else {
    //                 swal("取消购买");
    //             }
    //         });
    //     if(flag == 0)
    //      buytree();
    // }
    // function doit() {
    //     alert(id);
    // }

    // function select_data(){
    //     $.ajax({
    //         url:"select_tree",
    //         type:"GET",
    //         data:{"id":id},
    //         success:function (data) {
    //         },error:function () {
    //             alert("失败了");
    //         }
    //     })
    // }

    function buytree() {
        $.ajax({
            url:"buytree_sevlet",
            type:"GET",
            data:{"tree_id":tree_id,"user_id":user_id},
            success:function (data) {
                alert("购买成功")
            },error:function () {
                alert("购买失败");
            }
        })
    }

    function selltree() {
        $.ajax({
            url:"selltree_servlet",
            type:"GET",
            data:{"tree_id":tree_id,"user_id":user_id},
            success:function (data) {
                alert("出售成功")
            },error:function () {
                alert("出售失败");
            }
        })
    }

    btn_01.onclick = function myFunction(){
        tree_id = document.getElementById("tree_id").value;
        var x;
        var r = confirm("确认购买？");
        if (r==true){
            alert("成功确认");
            buytree();
        }
        else{
            alert("失败");
        }
    }

    btn_02.onclick = function sellFunction(){
        tree_id = document.getElementById("tree_id").value;
        var x;
        var r = confirm("确认卖出？");
        if (r==true){
            alert("已卖出");
            selltree();
        }
        else{
            alert("失败");
        }
    }
</script>
</body>
</html>